<script setup>
import {ref, watch} from "vue";

const {data} = defineProps(['data'])

const emits = defineEmits(['onValue'])

const value1 = ref(data.value[1] || '')
const value2 = ref(data.value[2] || '')

// 监听输入框
const onInput = (index, value) => {
 // 使用正则表达式限制输入内容：只允许数字和最多两位小数
 const regExp = /^\d*\.?\d{0,2}$/;

 // 如果输入不符合规则，则修正为符合规则的内容
 if (!regExp.test(value)) {
  // 如果不符合规则，去掉最后一个字符
  if (index === 1) {
   value1.value = value.slice(0, -1); // 删除最后一个字符
  } else if (index === 2) {
   value2.value = value.slice(0, -1); // 删除最后一个字符
  }
 } else {
  // 如果符合规则，正常更新值
  if (index === 1) value1.value = value;
  if (index === 2) value2.value = value;
 }

 emits('onValue', {
  index,
  value
 })
}
</script>

<template>
 <div class="input" v-if="data.uid === 20">
  <div class="input1">
   Diff><el-input v-model="value1"  @input="value => onInput(1, value)" class="input_value"></el-input>值
  </div>
  <div class="input1">
   Diff<<el-input v-model.number="value2" @keydown="value2 = value2.replace(/[^\d|\.]/g, '').replace(/^00/g, '0').replace(/^\./g, '0.')" @input="value => onInput(2, value)" class="input_value"></el-input>值
  </div>
 </div>

 <div class="input" v-if="data.uid === 21">
  <div class="input1">
   Diff<<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>值
  </div>
 </div>

 <div class="input" v-if="data.uid === 22">
  <div class="input1">
   dea><el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>值
  </div>
  <div class="input1">
   dea<<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>值
  </div>
 </div>

 <div class="input" v-if="data.uid === 23">
  <div class="input1">
   dea<<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>值
  </div>
 </div>

 <div class="input" v-if="data.uid === 60">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
  <p>上穿</p>
  <div class="input1">
   MA<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>
  </div>
 </div>

 <div class="input" v-if="data.uid === 61">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
  <p>下穿</p>
  <div class="input1">
   MA<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>
  </div>
 </div>

 <div class="input" v-if="data.uid === 62">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
  <p>向上拐点</p>
 </div>

 <div class="input" v-if="data.uid === 63">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
  <p>向下拐点</p>
 </div>

 <div class="input" v-if="data.uid === 64">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
  <p>>日均线</p>
 </div>

 <div class="input" v-if="data.uid === 65">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input><
  </div>
  <p>日均线</p>
 </div>

 <div class="input" v-if="data.uid === 66">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
  <div class="input1">
   >MA<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>
  </div>
 </div>

 <div class="input" v-if="data.uid === 67">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input><
  </div>
  <div class="input1">
   MA<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>
  </div>
 </div>

 <div class="input" v-if="data.uid === 68">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>向上
  </div>
 </div>

 <div class="input" v-if="data.uid === 69">
  <div class="input1">
   MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>向下
  </div>
 </div>

 <div class="input" v-if="data.uid === 70">
  <div class="input1">
   日均线上穿 MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
 </div>

 <div class="input" v-if="data.uid === 71">
  <div class="input1">
   日均线下穿 MA<el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>
  </div>
 </div>

 <div class="input" v-if="data.uid === 87">
  <div class="input1">
   K><el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>值
  </div>
  <div class="input1">
   K<<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>值
  </div>
 </div>

 <div class="input" v-if="data.uid === 88">
  <div class="input1">
   D><el-input v-model.number="value1" @input="value => onInput(1, value)" class="input_value"></el-input>值
  </div>
  <div class="input1">
   D<<el-input v-model.number="value2" @input="value => onInput(2, value)" class="input_value"></el-input>值
  </div>
 </div>
</template>

<style scoped lang="scss">
.input {
 display: flex;
 align-items: center;

 p {
  margin-right: 5px;
  font-size: 12px;
 }
}
.input1 {
 font-size: 12px;
 &:not(:last-child) {
  margin-right: 5px;
 }
}
.input_value {
 width: auto;
 height: auto;
 line-height: normal;
}

::v-deep .el-input__wrapper {
 width: 60px;
 box-shadow: none;
 border-bottom: 1px solid #333;
 height: 20px;
 line-height: 20px;
 border-radius: 0;
}

::v-deep input[type="number"] {
 -moz-appearance: textfield;
}
</style>